<template>
  <el-calendar>
    <template #date-cell="{ data }"  >
      <div style="text-align: center">
        <p>{{data.day}}</p>
        <el-link @click="workPlan(data.day)">查看</el-link>
      </div>
    </template>
  </el-calendar>

  <el-dialog v-model="dialogVisible" :title="'工作安排('+title+')'">
    <h4>已安排</h4>
    <el-table :data="Arrange">
      <el-table-column type="index" label="编号" width="80" align="center" ></el-table-column>
      <el-table-column prop="name" label="员工姓名" align="center" ></el-table-column>
      <el-table-column prop="smallDep" label="科室" align="center" ></el-table-column>
      <el-table-column prop="startTime" label="上班时间" align="center" ></el-table-column>
      <el-table-column prop="endTime" label="下班时间" align="center" ></el-table-column>
      <el-table-column label="操作" align="center" >
        <template #default="scope">
          <el-button link type="primary" size="small">修改</el-button>
          <el-button link type="primary" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <h4>未安排</h4>
    <el-table :data="noArrange">
      <el-table-column type="index" label="编号" width="80" align="center" ></el-table-column>
      <el-table-column prop="name" label="员工姓名" align="center" ></el-table-column>
      <el-table-column prop="smallDep" label="科室" align="center" ></el-table-column>
      <el-table-column prop="status" label="状态" align="center" ></el-table-column>
      <el-table-column label="操作" align="center" >
        <template #default="scope">
          <el-button type="primary" @click="addSchedules()">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

</template>
<script setup>

import { ref } from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const dialogVisible = ref(true);
const title = ref('');
const noArrange = ref([]);
const Arrange = ref([]);
const workPlan = (data) => {
  dialogVisible.value = true;
  title.value = data;
  console.log(data);
  axios.get(BASE_URL+"/v1/schedules/selectSchedules?date="+data).then((response)=>{
    if (response.data.code === 2000){
      Arrange.value = response.data.data;
      console.log(Arrange.value)
    }else {
      ElMessage.error(response.data.msg)
    }
  })
  axios.get(BASE_URL+"/v1/schedules/selectNoSchedules").then((response)=>{
    if (response.data.code === 2000){
      noArrange.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}


</script>

<style scoped>

</style>